<script lang="ts" setup name="Father">
    import { ref, reactive, provide } from 'vue';
    import Child from './Child.vue';

    let myMoney = ref(100);
    let myCar = reactive({
        brand: 'xiaomi',
        price: 29.9
    });

    function updateMyMoney(value: number) {
        myMoney.value += value;
    }

    // 向后代（儿子，孙子，重孙子...）提供数据
    provide('money', { money: myMoney, updateMoney: updateMyMoney });
    // 为什么上面不能写myMoney.value？因为这样会失去响应式特性，当后面myMoney的值更新时，给后代的值不会发生变化

    provide('car', myCar);
</script>

<template>
    <div class="father">
        <h2>父组件</h2>
        <div>银子：{{ myMoney }}</div>
        <div>一辆{{ myCar.brand }}汽车，价值{{ myCar.price }}W</div>
        <Child/>
    </div>
</template>

<style scoped>
    .father {
        background-color: gray;
        border-radius: 10px;
        padding: 10px;
        box-shadow: 0 0 10px;
    }
    .son2 {
        margin-top: 10px;
    }
</style>